@import '../global/variables.css';

.footer {
  composes: font from '../global/global.css';

  position: relative;

  box-sizing: border-box;
  height: calc(var(--ring-unit) * 8);
  margin: calc(var(--ring-unit) * 5) calc(var(--ring-unit) * 4) 0;
  padding-top: calc(var(--ring-unit) * 2);

  text-align: center;

  border-top: 1px solid var(--ring-line-color);

  font-size: var(--ring-font-size-smaller);
}

.footerFloating {
  composes: footer;

  position: absolute;
  z-index: var(--ring-fixed-z-index);
  bottom: 0;

  width: 100%;
  margin-right: 0;
  margin-bottom: var(--ring-unit);
  margin-left: 0;
}

.column {
  position: absolute;

  width: 33%;
}

.columnItem {
  display: inline-block;

  margin: 0;
  padding: 0;

  vertical-align: top;
}

.columnLeft {
  composes: column;

  text-align: left;
}

.columnCenter {
  composes: column;

  left: 33.6%;
}

.columnCenter .line {
  text-align: left;
}

.columnRight {
  composes: column;

  top: calc(var(--ring-unit) * 2);
  right: 0;

  text-align: right;
}

.line {
  padding: 0;

  list-style: none;

  line-height: calc(var(--ring-unit) * 2);
}

.lineCenter {
  text-align: left;
}
